<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>


<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/11/1 0001
  Time: 16:45
  To change this template use File | Settings | File Templates.
--%>

<html>
<head>
    <title>投票</title>
    <link rel="stylesheet" href="/static/js/plugins/layer_mobile/need/layer.css">
    <link rel="stylesheet" href="/static/css/front/css/base.css">
    <link rel="stylesheet" href="/static/css/front/css/index.css">
</head>
<body>
<div class="container">
    <p class="title">${vote.title}</p>
    <div class="banner" style="background: url('/downimg?path=${vote.banner}') no-repeat;background-size: cover" alt="加载失败"></div>
    <div class="info">
        <input type="hidden" name="beginTime" value="${vote.beginTime}" id="beginTime">
        <input type="hidden" name="endTime" value="${vote.endTime}" id="endTime">
        <input type="hidden" name="id" value="${vote.id}" id="voteId">
        <p>活动截止时间${vote.endTime}</p>
        <p>规则：每人每日限投一票，每票限投一人</p>
    </div>
    <ul id="fall-wrap" style="height: 600px">
        <c:forEach items="${voteItems}" var="item">
            <li class="box">
                <a href="javascript:void(0)">
                    <img src="/downimg?path=${item.img}" alt="加载失败"   >
                    <p class="user">${item.name}</p>
                    <p class="like">
                        <span >${item.votes}</span>票
                    </p>
                    <input type="hidden" name="id" value="${item.id}">
                    <input type="button" value="投票" class="btn">
                </a>
            </li>
        </c:forEach>
    </ul>
</div>
<script src="/static/js/plugins/jquery.js"></script>
<script src="/static/js/plugins/masonry/js/masonry-docs.js"></script>
<script src="/static/js/plugins/layer_mobile/layer.js"></script>
<script>
    $(function(){
        var $container = $('#fall-wrap');//瀑布流中的最大容器
        $container.imagesLoaded(function() {
            $container.masonry({
                itemSelector: '.box',//瀑布流中的每个容器
                gutter: 5,//内容块之间的距离是 5 像素
                isAnimated: true //打开动画选项
            });
        });

        $(".btn").click(function (Objcet) {
            var id = $(this).prevAll("input[name=id]").val();
            var voteId = $("#voteId").val();
            var $votes = $(this).closest("a").find("span");
            $.ajax({
                url:"/voteItem/count",
                data:{id:id,voteId:voteId},
                success:function (msg) {
                    layer.open({
                        content: msg.message
                        ,skin: 'msg' //弹层显示风格
                        ,time: 2 //2秒后自动关闭
                    });
                    if (msg.code==1){
                        $votes.text(Number($votes.text())+1);
                    }
                },
                error:function () {
                    console.log("投票失败！")
                }
            })
        })
    });

</script>
</body>
</html>
